在Javascript中，我們定義了函數去執行，可是當我們有很多函數要執行時，肯定會有先後順序，這時候就會牽扯到同步與非同步的問題，誰先做誰後做，而函數被定義了不是馬上執行，是透過呼叫函數才會執行動作，不是先定義就會先執行，接下來就讓我們來看看函數序列八。
函數序列
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function one() {
myDisplayer("Hello");
}
function two() {
myDisplayer("World");
}
one();
two();
</script>
</body>
</html>
在上述的例子中，我們先呼叫one()函數，改變了p的內容，而後又呼叫了two()函數，所以最後結果會顯示"World"。那今天會說是先定義了one()函數才有這種結果，那我們換個方式。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function one() {
myDisplayer("Hello");
}
function two() {
myDisplayer("World");
}
two();
one();
</script>
</body>
</html>
這個例子中我們先呼叫了two()函數，在呼叫one()函數，雖然是先定義的one()函數，但函數我們是看呼叫的順序來決定結果的!最後是one()函數，結果是"Hello"。
順序控制
假設我們今天要先計算出一個結果，再透過這個結果參數帶入另一個函數，這樣該怎麼做呢?我們就必須控制函數的順序，先計算出結果，再拿這個結果帶入函數。
function displayer(some) {
document.getElementById("demo").innerHTML = some;
}
function a(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = a(5, 5);
displayer(result);
我們宣告變數resule保存了a()函數計算完的結果，最後再把這個結果result做為參數帶入到displayer()函數裡執行結果!
當然還有另一種方式，你可以在第一個函數中就將結果帶入給第二個參數，只是你就無法控制第二個函數要不要執行，勢必一定會執行並印出結果。
function displayer(some) {
document.getElementById("demo").innerHTML = some;
}
function a(num1, num2) {
let sum = num1 + num2;
displayer(sum);
}
a(5, 5);
透過這個方法你可以只執行a函數()，可是也會執行displayer()函數，因為他已經被包在地一個函數裡去執行了!
回調
前面的兩個例子分別是要引用兩個函數及無法控制第二個函數要不要執行，而我們這時候可以使用回調來控制。回調簡單來說就是把函數作為參數去執行，接下來讓我們看看例子八。
function displayer(some) {
document.getElementById("demo").innerHTML = some;
}
function a(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
a(5, 5, displayer);
上述例子中我們把displayer函數作為參數傳給a()函數，將結果給印出來，而myCallback就是做為a函數接受的第三個參數。且函數傳遞時不要加上括號!
a(5, 5, displayer);//正確
a(5, 5, displayer());//錯誤
今天的介紹就到這邊了，下一篇我們會講解更多關於回調的內容，讓我們一起努力吧!
iThome鐵人賽
看影片追技術